<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/base_user.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>店铺名称</title>
    <script>
        $(function(){
            $(".tablist li").click(
                    function(){
                        var a=$(".tablist li").index(this);
                        $(this).addClass("cur");
                        $(this).siblings().removeClass("cur");
                        $(".tabcon>div").eq(a).css({display:"block"});
                        $(".tabcon>div").eq(a).siblings().css({display:"none"});
                    }
            )
        })
    </script>
</head>
{include file="public/href" /}
<body>
<div class="wrap-rew">
    <div class="header">
        <p>商品评论</p>
        <img src="__STATIC__/img_user/back.png" class="back" onclick=window.location.href="{:url('mobile/user_category/goods_details')}?goods_id={:input('goods_id')}">
    </div>
    <div class="tablist">
        <ul>
            <li {eq name=":input('grade',0)" eq value="0"}{eq name=":input('img',0)" value="0"} class="cur"{/eq}{/eq}><span><a href="?goods_id={:input('goods_id')}"><i style="font-style: normal;">✔</i>全部评价{$statistics['all_count']}</a></span></li>
            <li {eq name=":input('grade',0)" eq value="5"} class="cur"{/eq}><span><a href="?goods_id={:input('goods_id')}&grade=5"><i style="font-style: normal;">✔</i>好评{$statistics['good_count']}</a></span></li>
            <li {eq name=":input('grade',0)" eq value="3"} class="cur"{/eq}><span><a href="?goods_id={:input('goods_id')}&grade=3"><i style="font-style: normal;">✔</i>中评{$statistics['centre_count']}</a></span></li>
            <li {eq name=":input('grade',0)" eq value="1"} class="cur"{/eq}><span><a href="?goods_id={:input('goods_id')}&grade=1"><i style="font-style: normal;">✔</i>差评{$statistics['bad_count']}</a></span></li>
            <li {eq name=":input('img',0)" eq value="1"} class="cur"{/eq}><span><a href="?goods_id={:input('goods_id')}&img=1"><i style="font-style: normal;">✔</i>晒图{$statistics['img_count']}</a></span></li>
        </ul>
        <input type="hidden" value="{:input('goods_id')}"  id="goods_id" />
        <input type="hidden" value="{:input('grade',0)}"  id="grade" />
        <input type="hidden" value="{:input('img',0)}"  id="img" />
    </div>
    <div class="tabcon">
        <div class="cur">
            <div class="center" id="center">
            </div>
        </div>
        <div></div>
    </div>

</div>
{include file="public/src" /}
<script>
    //layer流加载
    layui.use('flow', function() {
        var $ = layui.jquery;
        var flow = layui.flow;
        flow.load({
            elem: '#center' //流加载容器
            ,isAuto:true
            ,isLazyimg:true
            ,done: function(page, next){ //执行下一页的回调
                var lis = [],
                    goods_id = $('#goods_id').val(),
                    grade = $('#grade').val(),
                    img = $('#img').val();
                $.ajax({
                    url:"{:url('mobile/user_category/goods_evaluate')}",
                    dataType:'json',
                    type:'post',
                    data:{'page':page,'goods_id':goods_id,'grade':grade,'img':img},
                    success:function(t){

                        layui.each(t.data, function(index, item){
                            if (item.member) {
                                var star = '';
                                for (var i=0;i<item.grade;i++){
                                    star += '<img src="__STATIC__/img_user/star.png">';
                                }
                                var extra = '';
//                            console.log(item.picArr[0]);
                                if (item.picArr){ //带图的评价
                                    for (var i=0;i<item.picArr.length;i++){
                                        if (item.picArr[i]['path']) {
                                            extra += '<li style="width: 20%;float: left;text-align: center;"><img src="/'+item.picArr[i]['path']+'" onerror=this.src="/static/mobile/img/empty_img.png" width="80" height="80"></a></li>';
                                        }

                                    }
                                }
                                var  avatar = '/'+item.member.avatar;

                                if (item.member.avatar.indexOf('http') > -1){
                                    avatar = item.member.avatar;
                                }
                                lis.push('<div class="review"><div class="title"><img src="'+avatar+'" onerror=this.src="/static/mobile/img/empty_img.png" >' +
                                        '<p>'+item.member.nickname+'</p><div class="star">' +star+
                                        '</div></div><p>'+item.content+'</p>' +
                                        '<div class="reply"><span>'+item.create_time+' 属性规格: '+item.attr+'</span></div>' +
                                        '<ul style="width: 100%;overflow: hidden;padding-top: 2%;">'+extra+'</ul></div>');
                            }

                        });
                        next(lis.join(''), page < t.pages);
                    }
                })
            }
        });
    });

</script>
</body>
</html>